<template>
  <Tag :color="color">{{info}}</Tag>
</template>
<script>
  export default {
    data() {
      return {
        color: 'red',
        info: "预警"
      }
    },
    props: ['state'],
    mounted() {

    },
    methods: {
      init() {

      }
    },
    watch: {
      state: {
        immediate: true,
        deep: true,
        handler(value) {
          switch (value) {
            case 1:
              this.color = 'green';
              this.info = '正常';
              break;
            case 2:
              this.color = 'yellow';
              this.info = '预警';
              break;
            case 3:
              this.color = 'red';
              this.info = '告警';
              break;
            case 4:
              this.color = 'gray';
              this.info = '故障';
              break;
            default:
              this.color = '#909399';
              this.info = '未知';
              break;
          }
        }
      }
    }
  }

</script>
